<template>
  <div class="outDiv">
    <p class="introduction" v-if="mbFlag">
      据人民网舆情数据中心监测数据显示，{{ formData.issuedataStart }}至{{
        formData.issuedataEnd
      }}，共监测到相关舆情信息{{ bjTotal }}条。其中，{{
        pieDataList['网媒'] ? '网媒信息' + pieDataList['网媒'] + '条，' : ''
      }}{{ pieDataList['平媒'] ? '纸媒信息' + pieDataList['平媒'] + '条，' : ''
      }}{{ pieDataList['论坛'] ? '论坛贴文' + pieDataList['论坛'] + '条，' : ''
      }}{{ pieDataList['博客'] ? '博客文章' + pieDataList['博客'] + '条，' : ''
      }}{{
        pieDataList['微信']
          ? '微信公众号文章' + pieDataList['微信'] + '条，'
          : ''
      }}{{ pieDataList['微博'] ? '微博' + pieDataList['微博'] + '条，' : ''
      }}{{ pieDataList['APP'] ? 'APP信息' + pieDataList['APP'] + '条，' : '' }}
    </p>
    <div ref="iconSvg" style="display:none;"></div>
    <div
      class="drawCharts"
      ref="drawCharts"
      :style="{ height: mbFlag ? 'calc(100% - 100px)' : '100%' }"
    >
      <div :class="classObject">
        <p class="chartTitle" :class="titleObj" :title="chartsConData.title">
          {{ chartsConData.title }}
        </p>
        <p
          class="chartsubTitle"
          :class="subTitleObj"
          :title="chartsConData.subtitle"
        >
          {{ chartsConData.subtitle }}
        </p>
      </div>
      <!-- <p ref="loading"
       class="loading"></p> -->
      <div
        ref="imageWrapper"
        style="position:relative;height:100%;box-sizing:border-box;display:flex;justify-content:center"
      >
        <div
          class="chinaArea"
          v-if="
            mapFlag && chartsConData.ways === '4' && chartsConData.type === '4'
          "
        >
          <div class="chinaPt">
            <div
              class="citys"
              v-if="
                chartsConData.statAreaAttr === '380' &&
                  chartsConData.thumbnail === '1'
              "
            >
              <img src="/static/icon/nanhai.png" />
              <p class="islandText">南海诸岛</p>
            </div>
            <div
              class="citys"
              :style="{ top: chartsConData.thumbnail === '0' ? '-79px' : 0 }"
              v-if="
                chartsConData.cityShow === '1' &&
                  chartsConData.statAreaAttr === '380'
              "
            >
              <p
                v-for="item in chartData"
                :key="item.id"
                :class="'city' + item.id"
                :style="{ 'font-size': chartsConData.textSize + 'px' }"
              >
                {{ item.name }}
              </p>
            </div>
          </div>
        </div>
        <!-- <ve-wordcloud
          :data="chartDataCloud"
          :settings="chartSettings"
        ></ve-wordcloud> -->
        <div
          id="mycharts"
          v-loading="loading"
          ref="mycharts"
          class="mycharts"
        ></div>
      </div>
    </div>
  </div>
</template>
<script>
import { drawb2 } from '../chartsType/chartEncaps/drawb2.js'
import { drawb3 } from '../chartsType/chartEncaps/drawb3.js'
import { drawb4 } from '../chartsType/chartEncaps/drawb4.js'
import { drawb5 } from '../chartsType/chartEncaps/drawb5.js'
import { drawb6 } from '../chartsType/chartEncaps/drawb6.js'
import { drawb7 } from '../chartsType/chartEncaps/drawb7.js'
import { drawz1 } from '../chartsType/chartEncaps/drawz1.js'
import { drawz2 } from '../chartsType/chartEncaps/drawz2.js'
import { drawz3 } from '../chartsType/chartEncaps/drawz3.js'
import { drawz4 } from '../chartsType/chartEncaps/drawz4.js'
import { drawl1 } from '../chartsType/chartEncaps/drawl1.js'
import { drawl2 } from '../chartsType/chartEncaps/drawl2.js'
// import { drawc1 } from '../chartsType/chartEncaps/drawc1.js'
import { drawc3 } from '../chartsType/chartEncaps/drawc3.js'

import {
  chartDataCloud,
  chartSettings
} from '../chartsType/chartEncaps/drawc2.js'
import { drawd1 } from '../chartsType/chartEncaps/drawd1.js'
import { drawd2 } from '../chartsType/chartEncaps/drawd2.js'
import { createNamespacedHelpers } from 'vuex'
import { GeoJSON } from './getJson.js'
import { GeoJSONAll } from './getJsonAll.js'
const { mapState, mapMutations } = createNamespacedHelpers('charts')

export default {
  name: 'drawcharts',
  props: {
    dropData: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chartDataCloud: chartDataCloud,
      chartSettings: chartSettings,
      pieDataList: {},
      mapFlag: false,
      geoJson: {},
      geoJsonAll: {},
      color: [],
      bjTotal: 0,
      screenWidth: document.body.clientWidth,
      cloudImg: ''
    }
  },
  methods: {
    svgToBase64(r) {
      let _this = this
      this.$axios
        .get('/static/chartsImg/' + this.chartsConData.svg + '.svg', {
          http: 'local'
        })
        .then(res => {
          _this.$refs.iconSvg.innerHTML = res.data
          let path = _this.$refs.iconSvg.children[0].children[0].children
          path.forEach(item => {
            item.setAttribute('fill', _this.chartsConData.svgColor)
          })
          const canvas = document.createElement('canvas')
          const ctx = canvas.getContext('2d')

          _this.$refs.iconSvg.children[0].setAttribute('width', '700')
          _this.$refs.iconSvg.children[0].setAttribute('height', '700')
          let v = _this.$canvg.fromString(
            ctx,
            _this.$refs.iconSvg.children[0].outerHTML
          )

          // Start SVG rendering with animations and mouse handling.
          v.start()
          // v.render();
          // canvg to image
          _this.cloudImg = canvas.toDataURL('image/png')
          // 创建新图片
          var img = new Image()
          img.src = _this.cloudImg
          img.addEventListener(
            'load',
            function() {
              // 绘制图片到canvas上
              canvas.width = img.width
              canvas.height = img.height

              // 在canvas绘制前填充白色背景
              ctx.fillStyle = '#fff'
              ctx.fillRect(0, 0, canvas.width, canvas.height)

              ctx.drawImage(img, 0, 0)

              // 展示base64位的图片
              getBase64(canvas, function(dataUrl) {
                _this.cloudImg = dataUrl
                r()
              })
            },
            false
          )

          // 获取canvas的base64图片的dataURL（图片格式为image/jpeg）
          function getBase64(canvas, callback) {
            var dataURL = canvas.toDataURL('image/jpeg')

            if (typeof callback !== undefined) {
              callback(dataURL)
            }
          }
        })
    },
    // 设置图形类型多余八中的剩余颜色
    setOtherColor() {
      let len = 0
      // 计算绘制图表数据的种类长度进而确定颜色
      if (
        (this.chartsConData.ways === '2' &&
          this.chartsConData.type1 === 'z2') ||
        (this.chartsConData.ways === '2' &&
          this.chartsConData.type1 === 'l1') ||
        (this.chartsConData.ways === '5' &&
          this.chartsConData.type1 === 'z2') ||
        (this.chartsConData.ways === '5' && this.chartsConData.type1 === 'l1')
      ) {
        let arr = []
        this.chartData.forEach(el => {
          if (!arr.includes(el.name)) {
            arr.push(el.name)
          }
        })
        len = arr.length
      } else if (this.chartsConData.ways === '4') {
        len = this.chartsConData.areaRange.length
      } else {
        len = this.chartData.length
      }
      this.color = [...this.chartsConData.themeColor]
      let m = 0
      if (len > 8) {
        for (let i = 8; i < len; i++) {
          let newColor = this.lightenDarkenColor(this.color[m++], 20)
          this.color.push(newColor)
        }
      }
    },
    // 获取制定颜色深浅不一的值
    lightenDarkenColor(col, amt) {
      var usePound = false
      if (col[0] === '#') {
        col = col.slice(1)
        usePound = true
      }
      var num = parseInt(col, 16)
      var r = (num >> 16) + amt
      if (r > 255) r = 255
      else if (r < 0) r = 0
      var b = ((num >> 8) & 0x00ff) + amt
      if (b > 255) b = 255
      else if (b < 0) b = 0
      var g = (num & 0x0000ff) + amt
      if (g > 255) g = 255
      else if (g < 0) g = 0
      return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16)
    },
    // 设置图表宽度最大值
    setMax() {
      let dom = this.$refs.drawCharts
      this.setChartsConData({
        chartsMaxWidth: dom.offsetWidth,
        chartsMaxHeight: dom.offsetHeight,
        canvasWidth: this.chartsConData.autoFit
          ? dom.offsetWidth
          : this.chartsConData.canvasWidth,
        canvasHeight: this.chartsConData.autoFit
          ? dom.offsetHeight
          : this.chartsConData.canvasHeight
      })
    },
    // 绘制图形
    drawWhich() {
      let opt = { _t: this, doms: 'mycharts' }
      let ww = this.$refs.mycharts
      ww.style.width = '100%'
      ww.style.height = '100%'
      ww.innerHTML = ''
      this.setOtherColor()
      this.setMax()
      if (this.chartsConData.ways === '1' && this.chartsConData.type === '1') {
        this.pieDataList = {}
        this.chartData.forEach(el => {
          this.pieDataList[el.label] = el.value
        })
      }
      switch (this.chartsConData.type1) {
        case 'b2':
          drawb2(opt)
          break
        case 'b3':
          drawb3(opt)
          break
        case 'b4':
          drawb4(opt)
          break
        case 'b5':
          drawb5(opt)
          break
        case 'b6':
          drawb6(opt)
          break
        case 'b7':
          drawb7(opt)
          break
        case 'z1':
          drawz1(opt)
          break
        case 'z2':
          drawz2(opt)
          break
        case 'z3':
          drawz3(opt)
          break
        case 'z4':
          drawz4(opt)
          break
        case 'l1':
          drawl1(opt)
          break
        case 'l2':
          drawl2(opt)
          break
        case 'c1':
          this.svgToBase64(() => {
            drawc3(opt)
          })
          break
        case 'd1':
          drawd1(opt)
          break
        case 'd2':
          drawd2(opt)
          break
      }
      this.setshadeDisplay(true)
    },
    ...mapMutations([
      'setChartsConData',
      'setshadeDisplay',
      'setLoading',
      'setDrawFlag',
      'setChangeArea'
    ])
  },
  computed: {
    mbFlag: function() {
      return this.chartsConData.ways === '1' && this.chartsConData.type === '1'
    },
    // 监听标题显示位置从而设置class
    classObject: function() {
      let loc = this.chartsConData.titleLocation
      return {
        locationTop: loc === 'top',
        locationBot: loc === 'bottom',
        locationLeft: loc === 'left',
        locationRight: loc === 'right'
      }
    },
    titleObj: function() {
      let loc = this.chartsConData.titleLocation
      return {
        titleTop: loc === 'top' || loc === 'bottom',
        titleLeft: loc === 'left',
        titleRight: loc === 'right'
      }
    },

    subTitleObj: function() {
      let loc = this.chartsConData.titleLocation
      return {
        titleTop: loc === 'top' || loc === 'bottom',
        titleLeft: loc === 'left',
        titleRight: loc === 'right',
        subTitleLeft: loc === 'left',
        subTitleRight: loc === 'right'
      }
    },

    ...mapState([
      'chartData',
      'chartsCondition',
      'chartsConData',
      'switchData',
      'areaList',
      'oldData',
      'themeColor',
      'loading',
      'drawFlag',
      'formData',
      'changeArea'
    ])
  },
  mounted() {
    let _this = this
    this.geoJson = GeoJSON
    this.geoJsonAll = GeoJSONAll
    this.$nextTick(() => {
      // 获取传递的参数
      _this.setMax()
      let requestParams = _this.$route.params
      if (requestParams && requestParams.id) {
        _this.drawWhich()
      }
      window.addEventListener('resize', () => {
        return (() => {
          window.screenWidth = document.body.clientWidth
          _this.screenWidth = window.screenWidth
        })()
      })
    })
  },
  watch: {
    screenWidth(val) {
      let _this = this
      if (!this.timer) {
        this.screenWidth = val
        this.timer = true
        setTimeout(function() {
          _this.setMax()
          _this.drawWhich(_this.chartsConData.type1)
          _this.timer = false
        }, 400)
      }
    },
    // 监听绘制区域宽度
    'chartsConData.canvasWidth'(val) {
      if (!this.chartsConData.autoFit) {
        this.drawWhich(this.chartsConData.type1)
      }
    },
    'chartsConData.canvasHeight'(val) {
      if (!this.chartsConData.autoFit) {
        this.drawWhich(this.chartsConData.type1)
      }
    },
    'chartsConData.themeColor'() {
      this.drawWhich(this.chartsConData.type1)
    },
    drawFlag(val) {
      this.drawWhich(this.chartsConData.type1)
    }
  }
}
</script>

<style scoped>
.outDiv {
  width: 100%;
  height: 100%;
}
.introduction {
  font-size: 16px;
  padding: 10px;
}
.chinaArea {
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  z-index: 1;
  pointer-events: none;
}
.chinaPt {
  width: 805px;
  display: inline-block;
  text-align: right;
  position: relative;
  color: #000;
}
.chinaPt img {
  width: 120px;
  position: absolute;
  top: 532px;
  right: 45px;
}
.citys {
  position: relative;
}
/* 南海诸岛 */
.chinaPt .islandText {
  position: absolute;
  top: 667px;
  right: 56px;
  font-size: 18px;
}
/* 海南 */
.chinaPt .city737 {
  position: absolute;
  top: 609px;
  left: 450px;
}
/* 新疆 */
.chinaPt .city747 {
  position: absolute;
  top: 268px;
  left: 158px;
}
/* 香港 */
.chinaPt .city755 {
  position: absolute;
  top: 568px;
  left: 522px;
}
/* 吉林 */
.chinaPt .city723 {
  position: absolute;
  top: 239px;
  left: 658px;
}
/* 台湾 */
.chinaPt .city735 {
  position: absolute;
  top: 540px;
  left: 585px;
}
/* 澳门 */
.chinaPt .city756 {
  position: absolute;
  top: 583px;
  left: 485px;
}
/* 宁夏 */
.chinaPt .city746 {
  position: absolute;
  top: 328px;
  left: 404px;
}
/* 青海 */
.chinaPt .city749 {
  position: absolute;
  top: 352px;
  left: 283px;
}
/* 西藏 */
.chinaPt .city754 {
  position: absolute;
  top: 418px;
  left: 182px;
}
/* 陕西 */
.chinaPt .city748 {
  position: absolute;
  top: 380px;
  left: 433px;
}
/* 安徽 */
.chinaPt .city734 {
  position: absolute;
  top: 425px;
  left: 542px;
}
/* 河北 */
.chinaPt .city726 {
  position: absolute;
  top: 312px;
  left: 519px;
}
/* 北京 */
.chinaPt .city727 {
  position: absolute;
  top: 281px;
  left: 532px;
}
/* 天津 */
.chinaPt .city725 {
  position: absolute;
  top: 299px;
  left: 552px;
}
/* 湖北 */
.chinaPt .city744 {
  position: absolute;
  top: 425px;
  left: 480px;
}
/* 湖南 */
.chinaPt .city743 {
  position: absolute;
  top: 474px;
  left: 470px;
}
/* 福建 */
.chinaPt .city732 {
  position: absolute;
  top: 507px;
  left: 549px;
}
/* 云南 */
.chinaPt .city752 {
  position: absolute;
  top: 521px;
  left: 349px;
}
/* 广东 */
.chinaPt .city738 {
  position: absolute;
  top: 540px;
  left: 497px;
}
/* 山东 */
.chinaPt .city736 {
  position: absolute;
  top: 341px;
  left: 550px;
}
/* 四川 */
.chinaPt .city753 {
  position: absolute;
  top: 429px;
  left: 365px;
}
/* 上海 */
.chinaPt .city729 {
  position: absolute;
  top: 431px;
  left: 604px;
}
/* 广西 */
.chinaPt .city739 {
  position: absolute;
  top: 538px;
  left: 440px;
}
/* 辽宁 */
.chinaPt .city721 {
  position: absolute;
  top: 261px;
  left: 614px;
}
/* 重庆 */
.chinaPt .city750 {
  position: absolute;
  top: 447px;
  left: 422px;
}
/* 内蒙古 */
.chinaPt .city724 {
  position: absolute;
  top: 227px;
  left: 519px;
}
/* 黑龙江 */
.chinaPt .city722 {
  position: absolute;
  top: 181px;
  left: 668px;
}
/* 甘肃 */
.chinaPt .city745 {
  position: absolute;
  top: 312px;
  left: 355px;
}
/* 江西 */
.chinaPt .city733 {
  position: absolute;
  top: 473px;
  left: 523px;
}
/* 山西 */
.chinaPt .city728 {
  position: absolute;
  top: 330px;
  left: 478px;
}
/* 贵州 */
.chinaPt .city751 {
  position: absolute;
  top: 493px;
  left: 414px;
}
/* 河南 */
.chinaPt .city742 {
  position: absolute;
  top: 379px;
  left: 493px;
}
/* 浙江 */
.chinaPt .city730 {
  position: absolute;
  top: 453px;
  left: 575px;
}
/* 江苏 */
.chinaPt .city731 {
  position: absolute;
  top: 394px;
  left: 574px;
}
.loading {
  position: absolute;
  height: 10%;
  bottom: 45%;
  width: 100%;
  text-align: center;
}
.drawCharts {
  position: relative;
  box-sizing: border-box;
}
.mycharts {
  text-align: center;
  margin: auto;
  width: 100%;
  height: 100%;
  display: table;
  min-height: 612px;
}
.chartTitle {
  font-size: 16px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.85);
}
.titleTop {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.locationTop {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 260px;
  z-index: 10;
}
.locationBot {
  position: absolute;
  bottom: 0;
  right: 10px;
  text-align: right;
  width: 260px;
  z-index: 10;
}
.locationLeft {
  position: absolute;
  left: 10px;
  top: 30px;
  width: 32px;
  height: 260px;
  z-index: 10;
}
.locationRight {
  position: absolute;
  right: 10px;
  top: 30px;
  width: 32px;
  height: 260px;
  z-index: 10;
}
.titleLeft {
  font-size: 16px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.85);
  width: 16px;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 15;
  float: left;
}
.titleRight {
  font-size: 16px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.85);
  width: 16px;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 15;
  float: right;
}
.subTitleLeft {
  width: 12px;
  margin-left: 4px;
  margin-top: 5px;
}
.subTitleRight {
  width: 12px;
  margin-right: 4px;
  margin-top: 5px;
}
.chartsubTitle {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
}
</style>
